<template>
  <div class>
    <PageTitle :title="pageTitle"></PageTitle>
    <div class="form-wrapper">
      <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="品牌" prop="brandId">
          <el-select v-model="brandId" placeholder="请选择" @change="brandChange">
            <el-option
              v-for="item in brandsList"
              :key="item.id"
              :label="item.fication_name"
              :value="item.id"
            ></el-option>
          </el-select>
          
        </el-form-item>
         
        <el-form-item label="内容" prop="contentId" >
          <el-select v-model="contentId" :disabled="disabled" @change="contentChange" placeholder="请选择">
            <el-option
              v-for="item in contentsList"
              :key="item.bid"
              :label="item.fication_name"
              :value="item.bid"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="url.type">
           <img
            v-if="url.type!=0"
            :src="url.url"
            @click="handlePictureCardPreview(url.url)"
            class="list-img"
            width="200" height="200"
          />
          <a v-else :href="url.url" target="_blank">
            <video :src="url.url" width="200" height="200"></video>
          </a>
         </el-form-item>
        <el-form-item label="款式" prop="styleId">
          <el-select v-model="styleId" :disabled="disabled" multiple placeholder="请选择">
            <el-option
              v-for="item in stylesList"
              :key="item.id"
              :label="item.goods_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="user_state == 1">
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="close()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import _ from "lodash";
import PageTitle from "@/components/pageTitle/PageTitle.vue";
export default {
  name: "MealDetail",
  components: {
    PageTitle
  },
  activated() {
    this.getbrands();
    this.activity_id = this.$route.params.activity
    if (this.$route.params.id != "none") {
      this._get();
      this.id = this.$route.params.id
    }
  },
  deactivated() {
    this.resetForm("ruleForm");
      this.brandId = null;
      this.styleId = null;
      this.contentId = null;
      this.url={type:null,id:null};
  },

  data() {
    return {
      activity_id:null,
      id:null,
      dialogVisible: false,
      disabled:true,
      brandId: null,
      brandsList: [], //品牌列表
      styleId: null,
      stylesList: [], //款式列表
      contentId: null,
      contentsList: [], //内容列表
      url:{id:null,type:null},
      user_state:localStorage.getItem('user_state')
    };
  },
  computed: {
    pageTitle() {
      return this.$route.params.id == "none" ? "活动添加" : "活动详情";
    },
    submitUrl() {
      return this.$route.params.id == "none"
        ? this.$api + "/v1/detailed/detailed"
        : this.$api + "/v1/detailed/modify";
    }
  },
  methods: {
    //内容改变时
    contentChange(){
      this.contentsList.forEach(item=>{
        console.log('item--------',item)
        console.log(`id:${this.contentId},fication:${item.bid}`)
        if (item.bid == this.contentId) {
          this.url = {type:item.type,url:item.url}
          console.log('内容改变--------',this.url)
        }
      })
    },
    //获取品牌列表
    async getbrands() {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/channel/fiction",
        method: "GET",
        params: {}
      });
      //console.log("品牌列表----------", data);
      if (code == 0) {
        this.brandsList = data;
      }
    },
    //获取内容中心列表
    async getcontents(id) {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/channel/fiction",
        method: "GET",
        params: {
          fiction: id
        }
      });
      //console.log("内容中心列表----------", data);
      if (code == 0) {
        this.contentsList = data;
      }
    },
    //获取款式列表
    async getstyles(id) {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/channel/goods",
        method: "GET",
        params: {
          fiction: id
        }
      });
      //console.log("款式列表----------", data);
      if (code == 0) {
        this.stylesList = data;
      }
    },
    //品牌改变时
    brandChange() {
      this.getcontents(this.brandId);
      this.getstyles(this.brandId);
      this.disabled = false
      this.contentId = null;
      this.styleId = null;
      this.url={type:null,id:null};
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 如果是编辑页，请求数据的函数
    async _get() {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/detailed/list",
        method: "GET",
        params: {
          channel_id:this.$route.params.activity,
          id: this.$route.params.id
        }
      });
      if (code === 0) {
        this.brandId = String(data.ficat_id)
        this.getcontents(this.brandId);
        this.getstyles(this.brandId);
        this.contentId = String(data.detail_id)
        this.styleId=data.goods_id.split(',').map(item=>{
          return parseInt(item)
        })
        this.url = {url:data.url,type:data.type}
        this.disabled = false
        
      }
    },
    // 提交表单
    async submitForm() {
      if (this.styleId.length < 1) {
        this.$message({
          message: "活动商品格式不正确",
          type: "warning"
        });
      }else {
        let {
          data: { code, data }
        } = await this.$axios({
          url: this.submitUrl,
          method: "POST",
          data: {
            channel_id:this.activity_id,
            ficat_id: this.brandId,
            goods_id: this.styleId.join(),
            detail_id: this.contentId,
            id: this.id
          }
        });
        if (code == 0) {
          this.brandId = null;
          this.styleId = null;
          this.contentId = null;
          this.$message.success(data);
          setTimeout(() => {
            this.$router.go(-1);
          }, 1500);
        }
      }
    },
    close() {
      this.resetForm("ruleForm");
      this.brandId = null;
      this.styleId = null;
      this.contentId = null;
      this.url={type:null,id:null};
      this.$router.go(-1);
    }
  }
};
</script>

<style lang='scss'>
.form-wrapper {
  width: 50%;
}
</style>
